<link rel="stylesheet" href="/assets/home/plugins/mescroll/mescroll.min.css">
<link rel="stylesheet" href="/assets/home/css/teacher_info.css">

<header class="mui-bar mui-bar-nav mui-bar-nav-bg">
    <a id="icon-menu" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">名师详情</h1>
</header>

<div class="header">
    <div class="left">
        <div class="avatar">
            <img src="{$info.avatar_cdn}">
        </div>
    </div>

    <div class="right">
        <div class="name">{$info.name}</div>
        <div class="course">课程：{$info.subject_count}</div>
        <div class="job">职位：{$info.follows}</div>

        <div class="follow">
            粉丝：<a href="{:url('/home/subject/follow/index',['teacherid' => $info.id])}">{$info.follow_count}</a>
            <br>
            <br>
            {if condition="$info.follow_status === false"}
            <button class="btn mui-btn-primary" id="follow">未关注</button>
            {else /}
            <button class="btn mui-btn-danger" id="follow">已关注</button>
            {/if}
        </div>
    </div>
</div>

<div class="content">
    {$info.content}
</div>

<!-- 搜索框 -->
<div class="mui-input-row mui-search">
    <input type="search" class="mui-input-clear" placeholder="请输入课程名称" name="search" />
</div>

<!-- 课程列表 -->
<div id="info" class="mescroll">
    <ul class="mui-table-view">
    </ul>
</div>


<script src="/assets/home/plugins/mescroll/mescroll.min.js"></script>

<script>

    // 关键字
    let search = '';

    //定义老师的id
    let teacherid = `{$info.id}`;

    // 实例化插件
    let meScroll = new MeScroll('info', {
        // 下拉刷新
        down: {
            auto: false,//是否在初始化完毕之后自动执行下拉回调callback; 默认true
            callback: downCallback // 下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
        },
        // 上拉加载
        up: {
            auto: true, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
            isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
            callback: UpCallback, //上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
            toTop: { //配置回到顶部按钮
                duration: 1000,
                src: "/assets/home/images/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
                offset: 100
            }
        }
    });

    async function downCallback() {
        meScroll.resetUpScroll();

        $('#info .mui-table-view').empty();

        return false;
    }

    async function UpCallback(page) {
        let data = {
            page: page.num,
            limit: page.size,
            search,
            teacherid
        }

        let result = await POST({
            url: 'subject/teacher/subject',
            params: data
        });

        console.log(result);

        // console.log(result);
        if (result.code === 0) {
            mui.toast('暂无数据');

            meScroll.endBySize(0, 0)

            return false;
        }

        if (result.code === 1) {
            let list = result.data.list;
            let count = result.data.count;

            meScroll.endBySize(list.length, count);

            fetchList(list);
        }else{
            meScroll.endBySize(0, 0);
            mui.toast(result.msg);
            return false;
        }
    }

    function fetchList(list = []) {
        if (list.length > 0) {
            let Item = '';
            for (let item of list) {
                Item = `
                  <li class="mui-table-view-cell mui-media">
                    <a class="item" href="">
                        <div class="thumb">
                            <img class="img" src="${item.thumb_cdn}">
                        </div>
                        <div class="info">
                            <h5 class="title">${item.title}</h5>
                            <p class="content mui-ellipsis">课程分类：${item.content}</p>
                            <p class="content mui-ellipsis">创建时间：${item.createtime_text}</p>
                            <p class="bottom">
                                <span class="like mui-icon mui-icon-starhalf">
                                    <span>${item.like_count}</span>
                                </span>
                                <span class="price">￥${item.price}</span>
                            </p>
                        </div>
                    </a>
                </li>
                `
                $('#info .mui-table-view').append(Item);
            }
        }
    }

    $('.mui-search input[type="search"]').keydown(function (e) {
        if (e.keyCode == 13 || e.keyCode == 108) {
            search = $(this).val();

            downCallback();

            return false;
        }
    })


    $('#follow').click(async function () {

        let data = {
            teacherid
        };

        let result = await POST({
            url: 'subject/teacher/follow',
            params: data
        });

        let follow_count = parseInt($('.follow a').text());

        if (result.code === 1) {
            if (result.msg.includes("取消关注成功")) {
                $(this).removeClass("mui-btn-danger").addClass("mui-btn-primary").text("未关注");
                $('.follow a').text(--follow_count);
            } else {
                $(this).removeClass("mui-btn-primary").addClass("mui-btn-danger").text("已关注");
                $('.follow a').text(++follow_count);
            }
        } else {
            if (result.msg.includes("取消关注失败")) {
                $(this).removeClass("mui-btn-danger").addClass("mui-btn-primary").text("未关注");
                $('.follow a').text(--follow_count);
            }
        }
        console.log(result);

    });
</script>